@extends('layouts.back_stage')
@section('content')
    <style>
        .shopBg{background:#fff;overflow: hidden;margin:20px 0 10px 0;}
        .tableBg{padding:10px;background:#fff;margin-top:10px;width:49%;float:left;}
        .tleBg{padding:10px;background:#fff;margin-top:10px;width:49%;float:right;}
        .input-item{width:400px;padding-right: 0;margin-right:10px;}
        .el-table tr:hover>td{background:initial !important;}
        .el-table tr.current-row>td{background:initial !important;}
        .el-table .bgBlue {background: #1aad1a;color:#fff;}
        ::-webkit-scrollbar {height: 8px;}
        [v-cloak] {display: none;}
    </style>
    <div class="container">
        <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">配货</h3></div>
        <!-- 主体-->
        <div class="page-body">
            <audio id="music_success" src="{{env('CDN_DOMAIN_NAME')}}/store/mp3/success.mp3" type="audio/mp3"></audio>
            <audio id="music_faile" src="{{env('CDN_DOMAIN_NAME')}}/store/mp3/faile.mp3" type="audio/mp3"></audio>
            <div class="row app" id="guanLi" v-loading="loading" v-cloak>
                <div class="col-md-12 row row-table-box">
                    <div class="shopBg" v-show="showBg">
                        <div class="row" style="padding:29px 30px;background:#fff;">
                            <div v-show="tiao" style="display: inline-block;">
                                <div style="width:100%;">
                                    <label>扫描条码/包码：</label>
                                    <el-input v-model.trim="small_qr" class="input-item" placeholder="请扫码或输入条码/包码" size="small" clearable></el-input>
                                    <el-button type="primary" size="small" @click="sureCode">确定</el-button>
                                    <el-button type="primary" size="small" @click="overBtn">配货完成</el-button>
                                </div>
                                <div style="display:inline-block;margin-top:10px;">
                                    <label>删除条码/包码：</label>
                                    <el-input v-model.trim="del_small_qr" class="input-item" placeholder="请扫码或输入要删除的条码/包码" size="small" clearable></el-input>
                                    <el-button type="primary" size="small" @click="delCode">确定</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="shopBg" style="min-height:60px;line-height:60px;">
                        <span style="margin:0 40px;display:inline-block;">单据号：@{{ order_num }}</span>
                        <span style="margin:0 40px;display:inline-block;">发货仓库：@{{ fact_type }}</span>
                        <span style="margin:0 40px;display:inline-block;">收货客户：@{{ receive_factory }}</span>
                        <span style="margin:0 40px;display:inline-block;">销售季节：@{{ season }}</span>
                        <span style="margin:0 40px;display:inline-block;">公司：@{{ company }}</span>
                        <span style="margin:0 40px;display:inline-block;">快递单号：@{{ express_num }}</span>
                    </div>
                    <div class="tableBg">
                        <el-table :data="thTist" max-height="510" size="mini" border style="width: 100%;" :row-class-name="tableRowClassName">
                            <el-table-column type="index" label="序号" width="50" :resizable='false'></el-table-column>
                            <el-table-column prop="year" label="年份" width="50" :resizable='false'></el-table-column>
                            <el-table-column prop="season" label="季节" width="50" :resizable='false'></el-table-column>
                            <el-table-column prop="cate_3" label="小类" min-width="100" :resizable='false'></el-table-column>
                            <el-table-column prop="girard" label="款号" min-width="90" :resizable='false'></el-table-column>
                            <el-table-column prop="color" width="80" label="颜色" :resizable='false'></el-table-column>
                            <el-table-column prop="size" width="50" label="尺码" :resizable='false'></el-table-column>
                            <el-table-column prop="price" label="吊牌价/元" align="right" width="80" :resizable='false'></el-table-column>
                            <el-table-column prop="num" label="数量/件" width="70" :resizable='false'></el-table-column>
                            <el-table-column prop="check_num" label="扫描数/件" width="80" :resizable='false'></el-table-column>
                        </el-table>
                    </div>
                    <div class="tleBg">
                        <el-table :data="thSist" max-height="510" size="mini" border style="width: 100%;">
                            <el-table-column type="index" label="序号" width="50" :resizable='false'></el-table-column>
                            <el-table-column prop="code" label="服装条码" min-width="140" :resizable='false'></el-table-column>
                            <el-table-column prop="girard" min-width="90" label="款号" :resizable='false'></el-table-column>
                            <el-table-column prop="color" width="80" label="颜色" :resizable='false'></el-table-column>
                            <el-table-column prop="size" width="50" label="尺码" :resizable='false'></el-table-column>
                            <el-table-column prop="price" label="吊牌价/元" align="right" width="80" :resizable='false'></el-table-column>
                            <el-table-column prop="scan_admin" width="80" label="扫描人" :resizable='false'></el-table-column>
                            <el-table-column prop="created_at" width="160" label="扫描时间" :resizable='false'></el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <!-- /主体-->
    </div>

    <script>
        new Vue({
            el: '#guanLi',
            data:{
                thTist:[],//单据清单
                thSist:[],//配货
                small_qr:'',//扫描的条码或包码
                del_small_qr:'',//删除的条码或包码
                tiao:true,

                order_num:'',//单据号
                fact_type:'',//发货仓库
                receive_factory:'',//收货店铺
                season:'',//销售季节
                company:'',//公司
                express_num:'',//快递单号
                loading:false,
                showBg:false,

                overBtnFlag:true,
            },
            created(){
                var url=window.location.href.split("=")[1];
                if(url==0){
                    this.showBg=true;
                }else{
                    this.showBg=false;
                }
                this.loading=true;
            },
            mounted(){
                this.grabble();
                this.rightBble();
            },
            methods:{
                //左边数据
                grabble(){
                    var that = this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/distribution/scan-code-details',
                        data: {
                            id:'{{$id}}',
                        },
                        success: function (data) {
                            //console.log(data);
                            if(data.result.success){
//                                if(data.content.status==0 || data.content.status==1){
//                                    that.showBg=true;
//                                }else{
//                                    that.showBg=false;
//                                }
                                that.order_num=data.content.cont.order_num;
                                that.fact_type=data.content.cont.fact_type;
                                that.receive_factory=data.content.cont.receive_factory;
                                that.season=data.content.cont.season;
                                that.company=data.content.cont.company;
                                that.express_num=data.content.cont.express_num;
                                that.thTist = data.content.data;
                            }else{
                                that.$notify({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                    duration: 0
                                });
                            }
                        }
                    });
                },
                //右边数据
                rightBble(){
                    var that = this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/distribution/scan-order-code',
                        data: {
                            id:'{{$id}}',
                        },
                        success: function (data) {
                            //console.log(data);
                            if(data.result.success){
                                that.thSist = data.content;
                                that.loading=false
                            }else{
                                that.$notify({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                    duration: 0
                                });
                            }
                        }
                    });
                },
                //确定扫码
                sureCode(){
                    var that=this;
                    if(this.small_qr.substr(0,1)=="B"){
                        if (this.small_qr != '') {
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                },
                                type: 'post',
                                url: '/distribution/scan-packet-code',
                                data: {
                                    id:'{{$id}}',
                                    packet_code:this.small_qr,
                                },
                                success: function (data) {
                                    console.log(data);
                                    if(data.result.success){
                                        that.small_qr='';
                                        var opt=[];
                                        for(var value of data.content){
                                            opt.unshift({
                                                'code':value.code,
                                                'girard':value.girard,
                                                'color':value.color,
                                                'size':value.size,
                                                'price':value.price,
                                                'scan_admin':value.scan_admin,
                                                'created_at':value.created_at,
                                            })
                                        }
                                        that.thSist=opt;
                                        that.grabble();
                                        var music = document.getElementById("music_success");
                                        music.play();
                                        that.$notify.success({
                                            title: '提示',
                                            message: "扫码成功"
                                        });
                                    }else{
                                        var music = document.getElementById("music_faile");
                                        music.play();
                                        that.$notify.error({
                                            title: '错误',
                                            message: data.result.errorMsg
                                        });
                                    }
                                }
                            })
                        }
                    }else{
                        if (this.small_qr != '') {
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                },
                                type: 'post',
                                url: '/distribution/scan-code-info',
                                data: {
                                    id:'{{$id}}',
                                    code:this.small_qr
                                },
                                success: function (data) {
                                    if(data.result.success){
                                        that.small_qr='';
                                        that.thSist.unshift({
                                            'code':data.content.code,
                                            'girard':data.content.girard,
                                            'color':data.content.color,
                                            'size':data.content.size,
                                            'price':data.content.price,
                                            'scan_admin':data.content.scan_admin,
                                            'created_at':data.content.created_at,
                                        });
                                        that.grabble();
                                        var music = document.getElementById("music_success");
                                        music.play();
                                        that.$notify.success({
                                            title: '提示',
                                            message: "扫码成功"
                                        });
                                    }else{
                                        var music = document.getElementById("music_faile");
                                        music.play();
                                        that.$notify.error({
                                            title: '错误',
                                            message: data.result.errorMsg
                                        });
                                    }
                                }
                            })
                        }
                    }
                },
                //确定删除扫码
                delCode(){
                    var that=this;
                    if (this.del_small_qr != '') {
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                            },
                            type: 'post',
                            url: '/distribution/distribute-del-scan-code',
                            data: {
                                id:'{{$id}}',
                                code:this.del_small_qr,
                            },
                            success: function (data) {
                                console.log(data);
                                if(data.result.success){
                                    that.del_small_qr='';
                                    that.rightBble();
                                    that.grabble();
                                    var music = document.getElementById("music_success");
                                    music.play();
                                    that.$notify.success({
                                        title: '提示',
                                        message: "删除成功"
                                    });
                                }else{
                                    var music = document.getElementById("music_faile");
                                    music.play();
                                    that.$notify.error({
                                        title: '错误',
                                        message: data.result.errorMsg
                                    });
                                }
                            }
                        })
                    }
                },

                /*变色*/
                tableRowClassName({row, rowIndex}){
                    if(Number(row.num)-Number(row.check_num)<=0){
                        return "bgBlue"
                    }else{
                        return ""
                    }
                },
                /*配货完成*/
                overBtn(){
                    var that=this;
                    const h = this.$createElement;
                    this.$msgbox({
                        title: '提示',
                        message: h('p', null, [
                            h('span', null, '是否确认完成配货('),
                            h('span', { style: 'color: red' }, '请确保配货数量与扫描数量相同'),
                            h('span', { style: 'color: #606266' }, ')?')
                        ]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                if(that.overBtnFlag==true){
                                    that.overBtnFlag=false;
                                    $.ajax({
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                        },
                                        type: 'post',
                                        url: '/distribution/close-distribution',
                                        data: {
                                            id:'{{$id}}'
                                        },
                                        success: function (data) {
                                            //console.log(data);
                                            if(data.result.success){
                                                that.$notify.success({
                                                    title: '提示',
                                                    message: "配货完成"
                                                });
                                                done();
                                                that.overBtnFlag=true;
                                                setTimeout(function () {
                                                    window.location.href='/distribution/warehouse-orders';
                                                },1000)
                                            }else{
                                                that.$notify.error({
                                                    title: '错误',
                                                    message: data.result.errorMsg
                                                });
                                                that.overBtnFlag=true;
                                            }
                                        }
                                    })
                                }
                            } else {
                                done();
                            }
                        }
                    }).then(action => {

                    });
                },
            },
            watch : {
                small_qr:function(val) {
                    var that=this;
                    if(val.substr(0,1)=="B"){
                        if (val != '' && val.length==17 ) {
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                },
                                type: 'post',
                                url: '/distribution/scan-packet-code',
                                data: {
                                    id:'{{$id}}',
                                    packet_code:val,
                                },
                                success: function (data) {
                                    if(data.result.success){
                                        //console.log(data);
                                        that.small_qr='';
                                        var opt=[];
                                        for(var value of data.content){
                                            opt.unshift({
                                                'code':value.code,
                                                'girard':value.girard,
                                                'color':value.color,
                                                'size':value.size,
                                                'price':value.price,
                                                'scan_admin':value.scan_admin,
                                                'created_at':value.created_at,
                                            })
                                        }
                                        that.thSist=opt;
                                        that.grabble();
                                        var music = document.getElementById("music_success");
                                        music.play();
                                        that.$notify.success({
                                            title: '提示',
                                            message: "扫码成功"
                                        });
                                    }else{
                                        var music = document.getElementById("music_faile");
                                        music.play();
                                        that.$notify.error({
                                            title: '错误',
                                            message: data.result.errorMsg
                                        });
                                    }
                                }
                            })
                        }
                    }else{
                        if (val != '' && val.length==15) {
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                },
                                type: 'post',
                                url: '/distribution/scan-code-info',
                                data: {
                                    id:'{{$id}}',
                                    code:val
                                },
                                success: function (data) {
                                    if(data.result.success){
                                        that.small_qr='';
                                        that.thSist.unshift({
                                            'code':data.content.code,
                                            'girard':data.content.girard,
                                            'color':data.content.color,
                                            'size':data.content.size,
                                            'price':data.content.price,
                                            'scan_admin':data.content.scan_admin,
                                            'created_at':data.content.created_at,
                                        });
                                        that.grabble();
                                        var music = document.getElementById("music_success");
                                        music.play();
                                        that.$notify.success({
                                            title: '提示',
                                            message: "扫码成功"
                                        });
                                    }else{
                                        var music = document.getElementById("music_faile");
                                        music.play();
                                        that.$notify.error({
                                            title: '错误',
                                            message: data.result.errorMsg
                                        });
                                    }
                                }
                            })
                        }
                    }
                },
                del_small_qr:function(val) {
                    var that=this;
                    if(val.substr(0,1)=="B"){
                        if (val != '' && val.length==17 ) {
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                },
                                type: 'post',
                                url: '/distribution/distribute-del-scan-code',
                                data: {
                                    id:'{{$id}}',
                                    code:val,
                                },
                                success: function (data) {
                                    if(data.result.success){
                                        //console.log(data);
                                        that.del_small_qr='';
                                        that.rightBble();
                                        that.grabble();
                                        var music = document.getElementById("music_success");
                                        music.play();
                                        that.$notify.success({
                                            title: '提示',
                                            message: "删除成功"
                                        });
                                    }else{
                                        var music = document.getElementById("music_faile");
                                        music.play();
                                        that.$notify.error({
                                            title: '错误',
                                            message: data.result.errorMsg
                                        });
                                    }
                                }
                            })
                        }
                    }else{
                        if (val != '' && val.length==15) {
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                },
                                type: 'post',
                                url: '/distribution/distribute-del-scan-code',
                                data: {
                                    id:'{{$id}}',
                                    code:val
                                },
                                success: function (data) {
                                    if(data.result.success){
                                        that.del_small_qr='';
                                        that.rightBble();
                                        that.grabble();
                                        var music = document.getElementById("music_success");
                                        music.play();
                                        that.$notify.success({
                                            title: '提示',
                                            message: "删除成功"
                                        });
                                    }else{
                                        var music = document.getElementById("music_faile");
                                        music.play();
                                        that.$notify.error({
                                            title: '错误',
                                            message: data.result.errorMsg
                                        });
                                    }
                                }
                            })
                        }
                    }
                },
            }
        });
    </script>
@endsection